<template>
    <div class="chat">
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class=" iconfont icon-fanhui header_fanhui" @click="back" ></span>
            <!--标题-->
            <h1 class="mui-title" >{{$store.state.appData.navbarTitle}}</h1>    
        </header>
        <div class="wrapper mui-scroll-wrapper" id="content_box">
            <div class="mui-scroll " id="dialogue_box">
                <ul>
                    <li v-for=" (val,index) in $store.state.appChat.crmMsgData">
                        <div class="chat-item" v-if="val.status == 0">
                            <div class="mychat">
                                <img v-if="user.headimgurl" :src="user.headimgurl" alt="" class="img"/>
                                <img v-else src="" alt="" class="img">
                                <div
                                    class="nt"><span>{{val.create_time|formatDatetwo}}</span>
                                </div>
                                <div class="msg" v-html="val.msg">{{val.msg}}</div>
                            </div>
                        </div>
                        <div class="chat-item" v-else>
                                <div class="otherchat"><img class="img" src="static/img/logo.png"/>
                                    <div
                                    class="nt"><span v-if="roomData">导购{{roomData.crm_user_data.name}}</span><span>{{val.create_time|formatDatetwo}}</span></div>
                                <div
                                class="msg" v-html="val.msg">{{val.msg}}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 自定义表情 -->
        <p v-show="iconsStatus" class="page__bd_spacing_top">
            <!-- <span alias="smile" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" title=":bowtie:" alt=":bowtie:" src="https://assets-cdn.github.com/images/icons/emoji/bowtie.png" :height="height"
                    :width="width">
            </span> -->
            <span alias="smile" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":smile:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f604.png">
            </span>
            <span alias="laughing" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f606.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":laughing:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f606.png">
            </span>
            <span alias="blush" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60a.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":blush:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60a.png">
            </span>
            <span alias="smiley" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f603.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":smiley:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f603.png">
            </span>
            <span alias="relaxed" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/263a.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":relaxed:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/263a.png">
            </span>
            <span alias="smirk" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60f.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":smirk:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60f.png">
            </span>
            <span alias="heart_eyes" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60d.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":heart_eyes:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60d.png">
            </span>
            <span alias="kissing_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f618.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":kissing_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f618.png">
            </span>
            <span alias="kissing_closed_eyes" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61a.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":kissing_closed_eyes:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61a.png">
            </span>
            <span alias="flushed" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f633.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":flushed:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f633.png">
            </span>
            <span alias="relieved" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60c.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":relieved:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60c.png">
            </span>
            <span alias="laughing" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f606.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":laughing:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f606.png">
            </span>
            <span alias="grin" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f601.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":grin:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f601.png">
            </span>
            <span alias="wink" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f609.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":wink:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f609.png">
            </span>
            <span alias="stuck_out_tongue_winking_eye" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61c.png"
                @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":stuck_out_tongue_winking_eye:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61c.png">
            </span>
            <span alias="stuck_out_tongue_closed_eyes" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61d.png"
                @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":stuck_out_tongue_closed_eyes:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61d.png">
            </span>
            <span alias="grinning" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f600.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":grinning:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f600.png">
            </span>
            <span alias="kissing" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f617.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":kissing:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f617.png">
            </span>
            <span alias="kissing_smiling_eyes" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f619.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":kissing_smiling_eyes:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f619.png">
            </span>
            <span alias="stuck_out_tongue" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61b.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":stuck_out_tongue:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61b.png">
            </span>
            <span alias="sleeping" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f634.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sleeping:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f634.png">
            </span>
            <span alias="worried" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61f.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":worried:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61f.png">
            </span>
            <span alias="frowning" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f626.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":frowning:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f626.png">
            </span>
            <span alias="anguished" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f627.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":anguished:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f627.png">
            </span>
            <span alias="open_mouth" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62e.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":open_mouth:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62e.png">
            </span>
            <span alias="grimacing" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62c.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":grimacing:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62c.png">
            </span>
            <span alias="confused" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f615.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":confused:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f615.png">
            </span>
            <span alias="hushed" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62f.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":hushed:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62f.png">
            </span>
            <span alias="expressionless" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f611.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":expressionless:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f611.png">
            </span>
            <span alias="unamused" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f612.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":unamused:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f612.png">
            </span>
            <!-- <span alias="sweat_smile" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f605.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sweat_smile:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f605.png">
            </span> -->
            <span alias="sweat" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f613.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sweat:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f613.png">
            </span>
            <span alias="disappointed_relieved" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f625.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":disappointed_relieved:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f625.png">
            </span>
            <span alias="weary" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f629.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":weary:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f629.png">
            </span>
            <span alias="pensive" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f614.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":pensive:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f614.png">
            </span>
            <span alias="disappointed" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61e.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":disappointed:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f61e.png">
            </span>
            <span alias="confounded" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f616.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":confounded:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f616.png">
            </span>
            <span alias="fearful" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f628.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":fearful:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f628.png">
            </span>
            <span alias="cold_sweat" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f630.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":cold_sweat:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f630.png">
            </span>
            <span alias="persevere" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f623.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":persevere:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f623.png">
            </span>
            <span alias="cry" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f622.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":cry:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f622.png">
            </span>
            <span alias="sob" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62d.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sob:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62d.png">
            </span>
            <span alias="joy" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f602.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":joy:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f602.png">
            </span>
            <span alias="astonished" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f632.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":astonished:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f632.png">
            </span>
            <span alias="scream" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f631.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":scream:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f631.png">
            </span>
            <span alias="tired_face" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62b.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":tired_face:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62b.png">
            </span>
            <span alias="angry" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f620.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":angry:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f620.png">
            </span>
            <span alias="rage" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f621.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":rage:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f621.png">
            </span>
            <span alias="triumph" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f624.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":triumph:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f624.png">
            </span>
            <span alias="sleepy" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62a.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sleepy:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62a.png">
            </span>
            <span alias="yum" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60b.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":yum:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60b.png">
            </span>
            <span alias="mask" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f637.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":mask:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f637.png">
            </span>
            <span alias="sunglasses" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60e.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sunglasses:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60e.png">
            </span>
            <span alias="dizzy_face" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f635.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":dizzy_face:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f635.png">
            </span>
            <span alias="imp" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f47f.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":imp:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f47f.png">
            </span>
            <span alias="smiling_imp" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f608.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":smiling_imp:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f608.png">
            </span>
            <span alias="neutral_face" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f610.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":neutral_face:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f610.png">
            </span>
            <span alias="no_mouth" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f636.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":no_mouth:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f636.png">
            </span>
            <span alias="innocent" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f607.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":innocent:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f607.png">
            </span>
            <span alias="alien" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f47d.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":alien:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f47d.png">
            </span>
            <span alias="yellow_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49b.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":yellow_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49b.png">
            </span>
            <!-- <span alias="blue_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f499.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":blue_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f499.png">
            </span>
            <span alias="purple_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49c.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":purple_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49c.png">
            </span>
            <span alias="heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2764.png">
            </span>
            <span alias="green_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":green_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49a.png">
            </span>
            <span alias="broken_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f494.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":broken_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f494.png">
            </span>
            <span alias="heartbeat" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f493.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":heartbeat:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f493.png">
            </span>
            <span alias="heartpulse" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f497.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":heartpulse:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f497.png">
            </span>
            <span alias="two_hearts" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f495.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":two_hearts:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f495.png">
            </span>
            <span alias="revolving_hearts" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49e.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":revolving_hearts:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f49e.png">
            </span>
            <span alias="cupid" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f498.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":cupid:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f498.png">
            </span>
            <span alias="sparkling_heart" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f496.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sparkling_heart:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f496.png">
            </span>
            <span alias="sparkles" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":sparkles:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png">
            </span>
            <span alias="star" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2b50.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":star:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2b50.png">
            </span>
            <span alias="star2" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f31f.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":star2:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f31f.png">
            </span>
            <span alias="dizzy" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4ab.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":dizzy:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4ab.png">
            </span>
            <span alias="boom" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a5.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":boom:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a5.png">
            </span>
            <span alias="boom" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a5.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":boom:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a5.png">
            </span>
            <span alias="anger" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a2.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":anger:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f4a2.png">
            </span>
            <span alias="exclamation" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2757.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":exclamation:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2757.png">
            </span>
            <span alias="question" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2753.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":question:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2753.png">
            </span>
            <span alias="grey_exclamation" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/2755.png" @click="insertIcon($event.target)" ios-version="6.0">
                <img class="emoji" alt=":grey_exclamation:" :height="height" :width="width" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2755.png">
            </span> -->
        </p>
        <!-- 自定义工具 -->
        <div id="toolbar" v-show="activeInput">
            <!-- Add font size dropdown -->
            <!-- <select class="ql-size">
                <option value="small"></option>
                <option selected></option>
                <option value="large"></option>
                <option value="huge"></option>
            </select> -->
            <!-- Add a bold button -->
            <!-- <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button> -->
            <!-- Add subscript and superscript buttons -->
            <button class="ql-image"></button>
            <!-- <button class="ql-color"></button>
            <button class="ql-background"></button> -->
            <button class="ql-icons" @click="switchIcons">
                <img style="width:18px;height:18px;" src=""
                />
            </button>
        </div>
        <!-- 聊天输入框 -->
        <quill-editor   style="position:absolute;z-index:1000;background:#fff;width:100%;bottom:0px;"
            v-model="inputVal" 
            ref="quillEditorA" 
            :options="editorOption" 
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)">
            <div id="toolbar" slot="toolbar"></div>
        </quill-editor>
        <!-- <div class="input-div">
          <div class="input-msg"> -->
            <span class="icon-jia" :class="activeInput ? 'activeInput' : ''" @click="switchZhuanhuan"></span>
            <!-- <input placeholder="请描述简单的问题" v-html="inputVal" @keyup.enter="sendMessage" maxlength="2000"/> -->
            <!-- <div id="input_div" ref="input_div" contenteditable="true" v-html="inputVal"  @keyup.enter="sendMessage($event.target.innerHTML)" >{{inputVal}}</div> -->
            <!-- quill-editor -->
            <div class="input-button">
                <button type="button" class="mui-btn mui-btn-primary sendBtn" @click="sendMessage" >发送</button>
            </div>
            <input id="inputFileOne" style="display:none" @change="bind('userImgOne')" type="file" accept="image/*" name="documentOne">
         <!--  </div>
        </div> -->
        <!-- 客服类型弹窗 -->
        <!-- <div class="mui-popover mui-active" v-if="customerTypePopup">
          <ul>
              <li class="mui-table-view-cell" @click="switchRoomType(1,1)">客服1</li>
              <li class="mui-table-view-cell" @click="switchRoomType(2,1)">客服2</li>
          </ul>
        </div> -->
    </div>
</template>

<script>
  import mui from 'static/js/mui'
  import axios from 'axios'
  import io from 'static/js/socket.io'
  import storage from '@/utils/localstorage'
  import { mapGetters } from 'vuex'
  import { mapState} from 'vuex'
  import { getUserInfo } from '@/api/user'
  import {uploadBase64} from '@/publicApi/common'
  
  export default {
    data() {
      return {
        height:20,
        width:20,
        iconsStatus:false,
        editorOption: {
            theme: 'snow',
            modules:{
                toolbar:'#toolbar'
            },
            placeholder: '请描述简单的问题',
        },
        dict:{
				userImgOne:{
                zise:'',
                type:'',
                name:''
            }
        },
        picUrl: 'http://61.160.114.182:8083/server/',
        activeInput: false,
        activeName: '',
        roomType: '',
        inputVal: "",
        tel:"",
        crmRoomId:"",
        status: 0,
        roomData: false,
        data: {},
        msgNum: 10,
        order_id: ''
      }
    },
    components: {
    },
    props: {},
    watch: {
      //监听聊天数据变动
		'crmMsgData': 'scrollToBottom'
    },
    methods: {
      insertIcon: function(dom){
          var objE = document.createElement("div");
          var clone = dom.cloneNode()
          objE.appendChild(clone);
          this.$refs.quillEditorA.quill.focus();
          const range = this.$refs.quillEditorA.quill.getSelection();
          this.$refs.quillEditorA.quill.pasteHTML(range.index, objE.innerHTML);
          this.$refs.quillEditorA.quill.setSelection(range.index + 1, 0);
          this.iconsStatus = false;

        },
        switchIcons:function(){
            this.iconsStatus = !this.iconsStatus
        },
        onEditorBlur(quill) {
            //console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
            //this.$refs.quillEditorA.quill.focus();
            //console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
            //console.log('editor ready!', quill)
        },
        // 如果是webApp 则调用此方法
        // 底部隐藏按钮绑定调用plus的方法
        bind: function(id) {
            var that = this
            var file = event.target.files[0];
            //console.log(file.name)
            // 将对应的id的图片信息放入到对应的数组中去
            try {
                that.dict[id].name = file.name
                that.dict[id].size = file.size
                that.dict[id].type = file.type
            }
            catch (err) {
                //console.log(err);
            }
            //这是核心,读取操作就是由它完成.//reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
            var reader = new FileReader();
            // FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。
            try {
                if (file.type.indexOf("image") == 0) {
                    reader.readAsDataURL(file)
                }
            } catch (err) {
                //console.log(err);
            }
            //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可 
            reader.onload = function (e) {
                // 此时的e.target.result就是编码成Data URL的图片  id照旧 然后传给图片上传的方法
                that.uploadHeadImg(e.target.result, id);
            };
        },
        //上传图片
        uploadHeadImg(imgPath, id) {//这里的id 会根据判断是手机app  还是webapp  则调用不同的方法
            var that = this
            var images = new Image();
            images.src = imgPath;
            images.onload = function () {
                var imgData = that.getBase64Image(images, that.dict[id].size, that.dict[id].type)
                images.src = '';
                //分片
               uploadBase64({ "folder":"chatting", 'base64Img': imgData }).then(function(res){
                    //console.log(res.data.msg)
                    that.inputVal = '<img onclick="magPic(event)" style="width:100px;height:100px;display:table-cell;" src="'+ process.env.PATH_INDEX_PIC + res.msg + '"/>';
                    window.crmSocket.emit('chat',{'msg':that.inputVal,'room':that.crmRoomId,'tel':that.tel,'status':that.status,'filter':that.msgNum})
                    that.inputVal = ''
                })
            }
        },
        // 压缩图片转成base64
        getBase64Image: function (img, size, type) {
            // //console.log(img.width)
            if (size > 307200) { //大于300KB就减少10倍长宽
                if (img.height > 2000) {
                    var width = img.width / 5.5;
                    var height = img.height / 5.5;
                }
                else if (img.height > 1000) {
                    var width = img.width / 5;
                    var height = img.height / 5;
                }
                else if (img.height > 500) {
                    var width = img.width / 2.5;
                    var height = img.height / 2.5;
                }
            } else {
                var width = img.width;
                var height = img.height;
            }
            var canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            var dataUrl = canvas.toDataURL(type, 1);
            // //console.log(dataUrl);
            return dataUrl.replace('data:' + type + ':base64,', '');
        },
        back() {
            //this.leaveRoom()
            this.$router.push({
                path: "/orderNavigate/crowdOrder"
            });
        },
        scrollToBottom() {
            //保持聊天滚动条最底部
            //重新计算布局值，最大滚动的高度等等
            this.$nextTick(function(){
                window.crmScroll.reLayout();
                window.crmScroll.scrollToBottom(0);
            })
		},
        switchZhuanhuan() {
            this.activeInput = !this.activeInput
            //this.customerTypePopup = !this.customerTypePopup
        },
        getParams() {
            //获取路由参数'
            let routeVal = this.$route.params
            if(JSON.stringify(routeVal)!=="{}"){
                if(typeof(routeVal.roomData) !== 'undefined'){
                    this.order_id = routeVal.roomData.orderId
                    this.roomId = 's'+routeVal.roomData.salerId+this.user.id//parseInt(routeVal.roomData.orderId)
                    this.switchRoomType(this.roomId, routeVal.roomData.salerId)
                    this.$store.commit('updateSalerId', parseInt(routeVal.roomData.salerId)) 
                    this.$store.commit('updateOrderId', parseInt(routeVal.roomData.orderId))             
                }
            }
        },
        //发送加入消息并开起推送
        switchRoomType(index, salerId) {
          //订单为房间唯一号，
          this.crmRoomId = index;
          this.$store.dispatch('handleUpdateCrmRoomId',this.crmRoomId)
          //发送一条消息开启异步推送
          window.crmSocket.emit('my_request',{'room':this.crmRoomId});
          //获取用户信息
          getUserInfo().then(res=>{
            let user_data = res.data.customerInfo
            //开启quill 
            this.$refs.quillEditorA.quill
            var vm = this
            var imgHandler = async function (state) {
              if (state) {
                //button is clicked
                document.getElementById('inputFileOne').click();
                //that.content = that.content
              }
            }
            vm.$refs.quillEditorA.quill.getModule("toolbar").addHandler("image", imgHandler)
            vm.$refs.quillEditorA.quill.on('text-change', function(delta, oldDelta, source) {
                if (source == 'api') {
                    //console.log("An API call triggered this change.");
                    //this.quill.updateContents(new Delta().retain(index).concat(paste), source);
                    ////console.log(range)
                } else if (source == 'user') {
                    //console.log("A user action triggered this change.");
                    //console.log(delta);
                }
            });
            //发送加入信息
            window.crmSocket.emit('join',{'order_id': this.order_id, 'room':this.crmRoomId,'tel':this.tel,'status':this.status,'filter':this.msgNum, 'user_data': user_data, 'saler_id': salerId, 'page': 1});
          })
        },
       // 发送信息方法
        sendMessage() {
            window.crmSocket.emit('chat',{'msg':this.inputVal,'room':this.crmRoomId,'tel':this.tel,'status':this.status,'filter':this.msgNum, 'page': 1})
            this.inputVal = ''
        },
        //退出房间,需要绑定返回键
        leaveRoom() {
            try{
                window.crmSocket.emit('leave',{'room':this.crmRoomId,'tel':this.tel,'status':this.status,'filter':this.msgNum, 'page': 1});
            } catch(err){
                //console.log("导购未进入房间离开的良性报错");
            }
        }
    },
    filters: {
        formatDatetwo:function(time) {
                var re = /-?\d+/;
                var m = re.exec(time*1000);
                var d = new Date(parseInt(m[0]));
                var o = {
                "M+": d.getMonth() + 1, //month
                "d+": d.getDate(),    //day
                "h+": d.getHours(),   //hour
                "m+": d.getMinutes(), //minute
                "s+": d.getSeconds(), //second
                "q+": Math.floor((d.getMonth() + 3) / 3),  //quarter
                "S": d.getMilliseconds() //millisecond
            }
            var format = "yyyy-MM-dd-hh-mm";
            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1,(d.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        }
    },
    computed: {
        ...mapGetters([
            'crmMsgData',
            'user'
        ]),
        ...mapState([
          'appChat',
        ])
    },
    created() {
    },
    mounted () {
        //老办法处理闭包
        let that = this;
        mui.init({
            keyEventBind: {
               backbutton: true  //关闭back按键监听
            }
        })
        mui.back = function () {
            that.$router.push('/orderNavigate/crowdOrder')
        }
        window.crmScroll =mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
        });
        //获取用户电话
        this.tel = storage.getLocalstorage('user').mobile
        if(typeof window.crmSocketState  === 'undefined'){
            //创建连接
            window.crmSocket = io.connect(process.env.CHAT_API+'/CrmChatRoom');
            //全部移到vuex中操作！！！
            ///监听回复的消息
            window.crmSocket.on('join',function(data){
                that.data = data.data.userMsgList.reverse();   
                that.$store.dispatch('handleUpdateCrmMsgData',that.data)
            });			
            //监听回复的消息
            window.crmSocket.on('leave',function(data){
                that.data = data.data.userMsgList.reverse();
                that.$store.dispatch('handleUpdateCrmMsgData',that.data)
            });		
            ///监听回复的消息
            window.crmSocket.on('chat',function(data){
                that.data = data.data.userMsgList.reverse();
                that.$store.dispatch('handleUpdateCrmMsgData',that.data)

            });
            //监听房间状态的消息
            window.crmSocket.on('my_request',function(data){
                if(data.data != ''){
                    for(let i=0;i<data.data.msg.length;i++){
                        if(data.data.msg[i]['room_id'] == that.appChat.orderId){
                            //console.log(that.roomData)
                            that.roomData = data.data.msg[i];
                            that.roomData.crm_user_data = JSON.parse(that.roomData.crm_user_data)
                            that.$store.dispatch('handleUpdateCrmRoomData',that.roomData)
                        }			
                    }
                }
            }); 
        }
      
        //获取选择的房间类型
        this.getParams()
        this.scrollToBottom()
        window.onresize = function(){
            that.scrollToBottom()
        }
    },
    destroyed () { 
      //发送离开信息
      this.leaveRoom()
      //window.crmSocket = null
      //window.crmScroll.disconnect();
      window.crmScroll = null;
      window.crmSocketState = 'connected';
    }
  };

</script>    


<style scoped>
.wrapper{
    margin-top: 30px;
    z-index: 1;
    margin-bottom: 60px;
}
ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 54px;
    padding-top:20px;
}
.wrapper ul li{
    padding: 0;
    margin-top: 20px;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.chat-item{
    width: 100%;
    margin: .7rem 0;
    height:0px;
}
.chat-item .otherchat{
    width: 100%;
    position: relative;
}
.chat-item .otherchat .img{
  width: 39px;
  height: 39px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: .2rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}
.chat-item .otherchat .nt{
  font-size: 12px;
  left: 2.5rem;
  top: -1.3rem;
  position: absolute;
  color: #686868;
}
.chat-item .otherchat .nt span {
  padding-right: .3rem;
}
.chat-item .otherchat .nt span:nth-child(2) {
  font-size: 12px;
}
.chat-item .otherchat .msg {
  float: left;
  min-height: 1em;
  max-width: 60%!important;
  margin-left: 2.5rem;
  padding: .3rem;
  border-radius: .4rem;
  font-size: 14px;
  /* line-height: 2.34rem; */
  background-color: #fff;
}
/* my */
.chat-item .mychat{
  width: 100%;
  position: relative;
}
.chat-item .mychat .img{
  width: 39px;
  height: 39px;
  border-radius: 50%;
  right: 0;
  position: absolute;
  top: 50%;
  right: .2rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.chat-item .mychat .nt {
  font-size: 12px;
  right: 2.5rem;
  top: -1.3rem;
  position: absolute;
  color: #686868;
}
.chat-item .mychat .msg{
  float: right;
  max-width: 60%;
  margin-right: 2.5rem;
  padding: .3rem;
  border-radius: .4rem;
  font-size: 14px;
  background-color: #4290f7;
  color: #fff;
  word-wrap:break-word;
}
.input-div {
  width:100%;
  height:50px;
  position: fixed;
  bottom: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  z-index: 999;
  background: #fff;
}
.input-msg {
  height: 30px;
  position: fixed;
  bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  z-index: 999;
}
.input-msg #input_div {
  width: 67.8%;
  height: 30px;
  line-height: 30px;
  margin: 0 .06rem;
  padding-left: .6rem;
  border-radius: .02rem;
  border: none;
  border-bottom: 1px solid #cccccc;
  outline: none;
  resize: none;
  overflow-y: hidden;
  font-size:14px;
}
/* https://www.cnblogs.com/mrnut/p/7656019.html */
[contenteditable = "true"], input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#cccccc
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#cccccc
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:#cccccc
}
input::-webkit-input-placeholder { /* webkit */
    color:#cccccc
}
.icon-jia{
  font-size:24px;
  margin:3px;
  margin-left:10px;
  color:#999999;
  display: inline-block;
  position: absolute;
  bottom:10px;
  z-index:5111;
}

.input-button{
  width:22%;
  position: absolute;
  bottom:10px;
  z-index:5111;
  right:0px;
}
.sendBtn{
  height:30px;
  float:right;
  margin-right: 10px;
  background-color: #ff6a27;
} 
.sendBtn:hover {
  background-color: #ff6a27;
  border: 1px solid #ff6a27;
}
/* 转换弹窗 */
.mui-table-view-cell{
  text-align: center;  
  height:60px;
  vertical-align:middle;
  line-height: 35px;
}
.mui-popover ul{
  padding-bottom:0px;
}
.mui-popover{
  width:170px;
  background-color: white;  
  position: absolute;
  bottom:60px;
  left:20px;
  
}
/* 头部导航 */
.header_fanhui{
  height:43px;
  line-height:43px;
  font-size: 18px;
  color:#666666;
  width: 43px;
}
.page__bd_spacing_top span{
    margin:3px;
    display: inline-block;
}
</style>